﻿html, body, div, h1, a, ul, li {
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    font-family: 'Segoe UI';
}

#wrapper {
    width: 920px;
    height: 100%;
    padding: 20px;
    margin: 0 auto;
    background: #eee;
    -webkit-box-shadow: 0 0 15px #000;
    box-shadow: 0 0 15px #000;
}

ul {
    list-style: none;
}

h1 {
    text-align: center;
    background: #ccc;
    width: 960px;
    margin: -20px -20px 0 -20px;
    -webkit-box-shadow: 0 3px 2px #777;
    box-shadow: 0 3px 2px #777;
    color: #777;
}

a {
    text-decoration: none;
    color: #000;

    &:hover {
        color: #c00;
    }
}

#admin-login-form {
    margin-top: 35px;
}

#login-btn,
#logout-btn,
#register-btn,
#login-link-btn,
#register-link-btn,
#get-users-btn,
#create-mosnter-btn,
#get-monsters-btn,
#mnstr-create-btn,
#get-items-btn,
#item-create-btn,
#create-mnstr-btn,
#item-update-btn,
#mnstr-update-btn {
    background: #ccc;
    padding: 10px;
    border-radius: 5px;
    margin-top: 200px;

    &:hover {
        background: #00b;
        color: #fff;
    }
}

#users-list, 
#user-details, 
#items-list, 
#item-details,
#monsters-list,
#monster-details {
    margin: 20px 0 0 10px;
}

.detail{
    font-weight: bold;
}

#hero-details{
    margin-left: 20px;
}
